JavaScript Module Federationin ajonaikainen API: Dynaaminen moduulien hallinta

            __webpack_require__.federate.init({
  react: {
    [__webpack_require__.federate.DYNAMIC_REMOTE]: {
      get: () => Promise.resolve(React)
    },
    version: '17.0.2',
  },
  'react-dom': {
    [__webpack_require__.federate.DYNAMIC_REMOTE]: {
      get: () => Promise.resolve(ReactDOM)
    },
    version: '17.0.2',
  }
});

            

              
                Copy
              
            
          

            async function loadModule(remoteName, moduleName) {
  try {
    const container = await __webpack_require__.federate.loadRemoteModule(
      `remoteApp@${remoteName}`,  // Varmista, että remoteName on muodossa {remoteName}@{url}
      'default'
    );
    const Module = container.get(moduleName);
    return Module;
  } catch (error) {
    console.error(`Moduulin ${moduleName} lataus etäsovelluksesta ${remoteName} epäonnistui:`, error);
    return null;
  }
}

// Käyttö:
loadModule('remoteApp', './Button')
  .then(Button => {
    if (Button) {
      // Käytä Button-komponenttia
      ReactDOM.render(, document.getElementById('root'));
    }
  });

            

              
                Copy
              
            

Selitys:

• Tämä esimerkki määrittelee asynkronisen funktion `loadModule`, joka lataa moduulin etäsovelluksesta.
• `__webpack_require__.federate.loadRemoteModule` kutsutaan etäsovelluksen aloituspisteen URL-osoitteella ja scopen nimellä ('default'). Etäsovelluksen aloituspiste on tyypillisesti URL, joka osoittaa Webpackin generoimaan `remoteEntry.js`-tiedostoon.
• `container.get(moduleName)` -funktio hakee moduulin etäkontista (remote container).
• Ladattua moduulia käytetään sitten komponentin renderöimiseen isäntäsovelluksessa.

3. `__webpack_require__.federate.shareScopeMap`

Tämä ominaisuus tarjoaa pääsyn jaetun scopen karttaan (shared scope map). Jaetun scopen kartta on tietorakenne, joka tallentaa tietoa jaetuista riippuvuuksista. Sen avulla voit tarkastella ja käsitellä jaettua scopea ajon aikana.

Esimerkki:

            console.log(__webpack_require__.federate.shareScopeMap);

            

              
                Copy
              
            
          

Selitys:

• Tämä esimerkki yksinkertaisesti tulostaa jaetun scopen kartan konsoliin. Voit käyttää tätä tarkastellaksesi jaettuja riippuvuuksia ja niiden versioita.

4. `__webpack_require__.federate.DYNAMIC_REMOTE` (Symboli)

Tätä symbolia käytetään avaimena jaetun scopen konfiguraatiossa osoittamaan, että riippuvuus tulisi ladata dynaamisesti etäsovelluksesta.

Esimerkki: (Katso `init`-esimerkki yllä)

Käytännön sovellukset ajonaikaiselle API:lle

Module Federationin ajonaikainen API mahdollistaa laajan valikoiman dynaamisia moduulien hallintaskenaarioita:

1. Dynaaminen ominaisuuksien lataus

Kuvittele suuri verkkokauppa-alusta, jossa eri ominaisuuksia (esim. tuotesuositukset, asiakasarvostelut, henkilökohtaiset tarjoukset) kehittävät erilliset tiimit. Module Federationin avulla jokainen ominaisuus voidaan julkaista itsenäisenä mikrofrontendinä. Ajonaikaista API:a voidaan käyttää näiden ominaisuuksien dynaamiseen lataamiseen käyttäjäroolien, A/B-testaustulosten tai maantieteellisen sijainnin perusteella.

Esimerkki:

            async function loadFeature(featureName) {
  if (userHasAccess(featureName)) {
    try {
      const Feature = await loadModule(`feature-${featureName}`, './FeatureComponent');
      if (Feature) {
        ReactDOM.render(, document.getElementById('feature-container'));
      }
    } catch (error) {
      console.error(`Ominaisuuden ${featureName} lataus epäonnistui:`, error);
    }
  } else {
    // Näytä viesti, joka kertoo, että käyttäjällä ei ole pääsyoikeutta
    ReactDOM.render(
Pääsy estetty
, document.getElementById('feature-container'));
  }
}

// Lataa ominaisuus käyttäjän pääsyoikeuden perusteella
loadFeature('product-recommendations');

            

              
                Copy
              
            
          

Selitys:

• Tämä esimerkki määrittelee funktion `loadFeature`, joka lataa dynaamisesti ominaisuuden käyttäjän pääsyoikeuksien perusteella.
• `userHasAccess`-funktio tarkistaa, onko käyttäjällä tarvittavat oikeudet ominaisuuden käyttöön.
• Jos käyttäjällä on pääsyoikeus, `loadModule`-funktiota käytetään lataamaan ominaisuus vastaavasta etäsovelluksesta.
• Ladattu ominaisuus renderöidään sitten `feature-container`-elementtiin.

2. Liitännäisarkkitehtuuri

Ajonaikainen API soveltuu hyvin liitännäisarkkitehtuurien rakentamiseen. Ydinsovellus voi tarjota puitteet kolmansien osapuolien kehittämien liitännäisten lataamiseen ja suorittamiseen. Tämä mahdollistaa sovelluksen toiminnallisuuden laajentamisen muuttamatta ydinkoodia. Esimerkkeinä sovellukset kuten VS Code tai Sketch, joissa liitännäiset tarjoavat erikoistuneita toiminnallisuuksia.

Esimerkki:

            async function loadPlugin(pluginName) {
  try {
    const Plugin = await loadModule(`plugin-${pluginName}`, './PluginComponent');
    if (Plugin) {
      // Rekisteröi liitännäinen ydinsovellukseen
      coreApplication.registerPlugin(pluginName, Plugin);
    }
  } catch (error) {
    console.error(`Liitännäisen ${pluginName} lataus epäonnistui:`, error);
  }
}

// Lataa liitännäinen
loadPlugin('my-awesome-plugin');

            

              
                Copy
              
            
          

Selitys:

• Tämä esimerkki määrittelee funktion `loadPlugin`, joka lataa dynaamisesti liitännäisen.
• `loadModule`-funktiota käytetään lataamaan liitännäinen vastaavasta etäsovelluksesta.
• Ladattu liitännäinen rekisteröidään sitten ydinsovellukseen `coreApplication.registerPlugin`-funktion avulla.

3. A/B-testaus ja kokeilut

Module Federationia voidaan käyttää tarjoamaan dynaamisesti eri versioita ominaisuudesta eri käyttäjäryhmille A/B-testausta varten. Ajonaikainen API antaa sinun hallita, mikä moduulin versio ladataan kokeiluasetusten perusteella.

Esimerkki:

            async function loadVersionedModule(moduleName, version) {
  let remoteName = `module-${moduleName}-v${version}`;
  try {
    const Module = await loadModule(remoteName, './ModuleComponent');
    return Module; 
  } catch (error) {
    console.error(`Moduulin ${moduleName} version ${version} lataus epäonnistui:`, error);
    return null;
  }
}

async function renderModule(moduleName) {
  let version = getExperimentVersion(moduleName); // Määritä versio A/B-testin perusteella
  const Module = await loadVersionedModule(moduleName, version);
  if (Module) {
    ReactDOM.render(, document.getElementById('module-container'));
  } else {
    // Varakäsittely tai virheenkäsittely
    ReactDOM.render(
Moduulin latausvirhe
, document.getElementById('module-container'));
  }
}

renderModule('my-module');

            

              
                Copy
              
            
          

Selitys:

• Tämä esimerkki näyttää, kuinka ladata eri versioita moduulista A/B-testin perusteella.
• `getExperimentVersion`-funktio määrittää, mikä moduulin versio tulisi ladata käyttäjän A/B-testiryhmän perusteella.
• `loadVersionedModule`-funktio lataa sitten sopivan version moduulista.

4. Moniasiakassovellukset (Multi-Tenant)

Moniasiakassovelluksissa eri asiakkaat saattavat vaatia erilaisia mukautuksia tai ominaisuuksia. Module Federation antaa sinun ladata dynaamisesti asiakaskohtaisia moduuleja ajonaikaisen API:n avulla. Jokaisella asiakkaalla voi olla oma joukko etäsovelluksia, jotka paljastavat räätälöityjä moduuleja.

Esimerkki:

            async function loadTenantModule(tenantId, moduleName) {
  try {
    const Module = await loadModule(`tenant-${tenantId}`, `./${moduleName}`);
    return Module;
  } catch (error) {
    console.error(`Moduulin ${moduleName} lataus asiakkaalle ${tenantId} epäonnistui:`, error);
    return null;
  }
}

async function renderTenantComponent(tenantId, moduleName, props) {
  const Module = await loadTenantModule(tenantId, moduleName);
  if (Module) {
    ReactDOM.render(, document.getElementById('tenant-component-container'));
  } else {
    ReactDOM.render(
Komponenttia ei löydy tälle asiakkaalle.
, document.getElementById('tenant-component-container'));
  }
}

// Käyttö:
renderTenantComponent('acme-corp', 'Header', { logoUrl: 'acme-logo.png' });

            

              
                Copy
              
            
          

Selitys:

• Tämä esimerkki näyttää, kuinka ladata asiakaskohtaisia moduuleja.
• `loadTenantModule`-funktio lataa moduulin asiakastunnukseen sidotusta etäsovelluksesta.
• `renderTenantComponent`-funktio renderöi sitten asiakaskohtaisen komponentin.

Huomioitavaa ja parhaat käytännöt

• Versiohallinta: Hallitse jaettujen riippuvuuksien versioita huolellisesti konfliktien välttämiseksi ja yhteensopivuuden varmistamiseksi. Käytä semanttista versiointia ja harkitse työkaluja, kuten versioiden kiinnittämistä tai riippuvuuksien lukitsemista.
• Turvallisuus: Varmista etämoduulien eheys estääksesi haitallisen koodin latautumisen sovellukseesi. Harkitse koodin allekirjoittamista tai tarkistussummien käyttöä. Ole myös erittäin varovainen lataamiesi etäsovellusten URL-osoitteiden kanssa; varmista, että luotat lähteeseen.
• Virheenkäsittely: Toteuta vankka virheenkäsittely käsitelläksesi siististi tilanteet, joissa etämoduulien lataus epäonnistuu. Tarjoa informatiivisia virheilmoituksia käyttäjälle ja harkitse varamekanismeja.
• Suorituskyky: Optimoi etämoduulien latausta viiveen minimoimiseksi ja käyttäjäkokemuksen parantamiseksi. Käytä tekniikoita, kuten koodin pilkkomista (code splitting), laiskalatausta (lazy loading) ja välimuistia.
• Jaetun scopen alustus: Varmista, että jaettu scope on alustettu oikein ennen etämoduulien lataamista. Tämä on ratkaisevan tärkeää riippuvuuksien jakamiselle ja päällekkäisyyksien estämiselle.
• Seuranta ja havaittavuus: Toteuta seuranta ja lokitus Module Federation -järjestelmäsi suorituskyvyn ja tilan seuraamiseksi. Tämä auttaa sinua tunnistamaan ja ratkaisemaan ongelmia nopeasti.
• Transitiiviset riippuvuudet: Harkitse huolellisesti transitiivisten riippuvuuksien vaikutusta. Ymmärrä, mitkä riippuvuudet jaetaan ja miten ne saattavat vaikuttaa sovelluksen kokonaiskokoon ja suorituskykyyn.
• Riippuvuuskonfliktit: Ole tietoinen mahdollisista riippuvuuskonflikteista eri moduulien välillä. Käytä työkaluja kuten `peerDependencies` ja `externals` näiden konfliktien hallintaan.

Edistyneet tekniikat

1. Dynaamiset etäkontit

Sen sijaan, että määrittäisit etäsovellukset ennalta Webpack-konfiguraatiossasi, voit dynaamisesti hakea etäsovellusten URL-osoitteet palvelimelta tai konfiguraatiotiedostosta ajon aikana. Tämä antaa sinun muuttaa etämoduuliesi sijaintia ilman isäntäsovelluksen uudelleenjulkaisua.

            // Hae etäkonfiguraatio palvelimelta
async function getRemoteConfig() {
  const response = await fetch('/remote-config.json');
  const config = await response.json();
  return config;
}

// Rekisteröi etäsovellukset dynaamisesti
async function registerRemotes() {
  const remoteConfig = await getRemoteConfig();
  for (const remote of remoteConfig.remotes) {
    __webpack_require__.federate.addRemote(remote.name, remote.url);
  }
}

// Lataa moduulit etäsovellusten rekisteröinnin jälkeen
registerRemotes().then(() => {
  loadModule('dynamic-remote', './MyComponent').then(MyComponent => {
    // ...
  });
});

            

              
                Copy
              
            
          

2. Mukautetut moduulien lataajat

Monimutkaisemmissa skenaarioissa voit luoda mukautettuja moduulien lataajia, jotka käsittelevät tietyntyyppisiä moduuleja tai suorittavat mukautettua logiikkaa latausprosessin aikana. Tämä antaa sinun räätälöidä moduulien latausprosessin omiin tarpeisiisi.

3. Palvelinpuolen renderöinti (SSR) Module Federationilla

Vaikka se on monimutkaisempaa, voit käyttää Module Federationia palvelinpuolen renderöinnin kanssa. Tämä tarkoittaa etämoduulien lataamista palvelimella ja niiden renderöimistä HTML:ksi. Tämä voi parantaa sovelluksesi alkulatausaikaa ja parantaa hakukoneoptimointia (SEO).

Yhteenveto

JavaScript Module Federationin ajonaikainen API tarjoaa tehokkaita työkaluja etämoduulien dynaamiseen hallintaan. Ymmärtämällä ja hyödyntämällä näitä toimintoja voit rakentaa joustavampia, skaalautuvampia ja ylläpidettävämpiä sovelluksia. Module Federation edistää itsenäistä kehitystä ja julkaisua, mahdollistaen nopeammat julkaisusyklit ja suuremman ketteryyden. Teknologian kypsyessä voimme odottaa näkevämme yhä innovatiivisempia käyttötapauksia, jotka vahvistavat edelleen Module Federationin asemaa nykyaikaisten web-arkkitehtuurien keskeisenä mahdollistajana.

Muista harkita huolellisesti Module Federationin turvallisuus-, suorituskyky- ja versiohallintanäkökohtia varmistaaksesi vankan ja luotettavan järjestelmän. Omaksuksemalla nämä parhaat käytännöt voit avata dynaamisen moduulinhallinnan koko potentiaalin ja rakentaa todella modulaarisia ja skaalautuvia sovelluksia maailmanlaajuiselle yleisölle.